import {Image, StyleSheet, View, Text, TouchableOpacity, ScrollView, Modal} from 'react-native';
import { Stack, useRouter } from "expo-router";
import AntDesign from '@expo/vector-icons/AntDesign';
import { Swipeable, GestureHandlerRootView } from 'react-native-gesture-handler';
import { useRef, useState } from "react";
import avator from "@/assets/images/me/avator.png";

export default function BackListScreen() {
    const router = useRouter();
    const [openSwipeRef, setOpenSwipeRef] = useState(null); // 记录当前打开的 Swipeable

    // 处理滑动逻辑，关闭之前的项
    const onSwipe = (swipeRef) => {
        if (openSwipeRef && openSwipeRef !== swipeRef) {
            openSwipeRef.close(); // 关闭之前打开的
        }
        setOpenSwipeRef(swipeRef); // 记录当前打开的
    };

    const renderRightActions = () => (
       <TouchableOpacity onPress={pupoModal} style={styles.deleteBox} activeOpacity={1}>
           <Text style={styles.deleteText}>解除拉黑</Text>
       </TouchableOpacity>
    );

    const pupoModal = function () {
        console.log('shanchu')
    };

    return (
        <GestureHandlerRootView style={{ flex: 1, backgroundColor: "#F7F7F7" }}>
            <Stack.Screen
                options={{
                    title: '活动黑名单',
                    headerStyle: { backgroundColor: '#f7f7f7' },
                    headerShadowVisible: false,
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                        </TouchableOpacity>
                    ),
                }}
            />
            <View style={styles.backListContainer}>
                <ScrollView style={{ flex: 1 }}>
                    { [1, 2, 3, 4, 5, 6].map((item, index) => {
                        const swipeRef = useRef(null); // 每个 `Swipeable` 需要单独的 `useRef`

                        return (
                            <Swipeable
                                key={index}
                                ref={swipeRef}
                                renderRightActions={renderRightActions}
                                onSwipeableOpen={() => onSwipe(swipeRef.current)}

                            >
                                <View style={styles.backListItem}>
                                    <View style={styles.userAvator}>
                                        <Image source={avator} style={{ width: "100%", height: "100%" }} />
                                    </View>
                                    <View style={styles.name}>
                                        <Text style={styles.nameText}>萌宠小猪猪</Text>
                                    </View>
                                </View>
                            </Swipeable>
                        );
                    })}
                </ScrollView>
            </View>
        </GestureHandlerRootView>
    );
}

const styles = StyleSheet.create({
    backListContainer: { paddingLeft: 12, paddingTop: 12, marginBottom: 12, flex: 1 },
    backListItem: { flexDirection: "row", alignItems: "center", borderRadius: 8, marginBottom: 16 },
    userAvator: { width: 46, height: 46 },
    name: { marginLeft: 10 },
    nameText: { fontSize: 16, color: "#3D3D3D" },
    deleteBox: { justifyContent: 'center', alignItems: 'center', width: 70, height: 46 , backgroundColor: '#FB4B34' },
    deleteText: { color: 'white', fontWeight: 'bold' },
});

export default BackListScreen;
